<template>
  <div id="cesiumContainer" class="fullSize"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';

import { CesiumNavigationOptions } from './cesium/initViewer';

import MousePosition from './cesium/MousePosition';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

//https://blog.csdn.net/yangwqi/article/details/104277964

onMounted(async () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode: 2,
  });
  viewer.entities.add({
    id: 'id',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: './Assets/Images/cesium_credit.png',
      // image: '../images/Cesium_Logo_overlay.png',
    },
  });
  viewer.entities.add({
    id: 'id2',
    position: Cesium.Cartesian3.fromDegrees(-50.59777, 40.03883),
    billboard: {
      // image: '../images/Cesium_Logo_overlay.png',
      image: './Assets/Images/ion_credit.png',
    },
  });
  var pointDraged = null;
  var leftDownFlag = false;
  viewer.screenSpaceEventHandler.setInputAction(
    leftDownAction,
    Cesium.ScreenSpaceEventType.LEFT_DOWN
  );
  viewer.screenSpaceEventHandler.setInputAction(
    leftUpAction,
    Cesium.ScreenSpaceEventType.LEFT_UP
  );
  viewer.screenSpaceEventHandler.setInputAction(
    mouseMoveAction,
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
  );
  function leftDownAction(e) {
    console.log('左键按下');
    var windowPosition = e.position;
    pointDraged = viewer.scene.pick(windowPosition); //选取当前的entity
    leftDownFlag = true;
    if (pointDraged) {
      // 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
      viewer.scene.screenSpaceCameraController.enableTranslate = false; //锁定相机
    }
  }
  function leftUpAction(e) {
    console.log('左键抬起');
    leftDownFlag = false;
    pointDraged = null;
    viewer.scene.screenSpaceCameraController.enableTranslate = true; //解锁相机
  }
  function mouseMoveAction(e) {
    if (leftDownFlag === true && pointDraged) {
      console.log('鼠标移动');
      var cartesian = viewer.scene.camera.pickEllipsoid(
        e.endPosition,
        viewer.scene.globe.ellipsoid
      );
      console.log(cartesian, pointDraged.id.position);
      if (cartesian) {
        pointDraged.id.position = new Cesium.CallbackProperty(function () {
          return cartesian;
        }, false);
      }
    }
  }
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#cesiumContainer {
  height: 90vh;
  width: 90vw;
}
</style>
